<template>
  <div class="app-container">
    <div class="left">
      <h3>{{ nub+1 }}# {{ randlist[nub].title }} - 序号{{ randlist[nub].id }} <span @click="drawer=true">?</span></h3>
      <el-checkbox-group v-model="randlist[nub].usersAnswers">
        <el-checkbox
          style="display:block;fontSize:16px"
          v-for="(item,index) in randlist[nub].options"
          :key="index"
          :label="item.index"
        >
          {{ item.index +")  "+ item.value }}</el-checkbox>
      </el-checkbox-group>
      <div class="btns">
        <el-button
          type="success"
          v-show="!(nub==0)"
          @click.stop="nub-=1"
        >上一个</el-button>
        <el-button
          type="success"
          @click.stop="addNub"
        >{{ (nub+1)==50? "提交试卷" : "下一个"}}</el-button>
      </div>
    </div>

    <div class="right">
      <ul class="title-nub">
        <li
          v-for="(item,index) in randlist"
          :key="index"
          :style="{backgroundColor: nub==index ? 'rgb(0, 183, 255, 0.7)' : ''}"
          @click="nubClick(index)"
          ref="lis"
        >
          {{ index+1 }}
        </li>
      </ul>
      <!-- 进度条 -->
      <div class="percent">
        <el-progress
          type="circle"
          :percentage="percentage"
          :show-text="false"
        ></el-progress>
        <span>{{ time }}</span>
      </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer
      title="答案提示："
      :visible.sync="drawer"
      :append-to-body="true"
      :modal-append-to-body="true"
      style="position:fixed;"
    >
      <span>{{randlist[nub].tips}}</span>
    </el-drawer>

    <!-- 提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      modal-append-to-body
      :append-to-body="true"
    >
      <div>
        <div>恭喜完成考试！</div>
        <div>用时：{{ endTime }}</div>
        <div>分数：{{ 100 }}</div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="isClose"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      nub: 0,
      hover: "hover",
      drawer: false,
      time: "50:00",
      timer: null,
      dialogVisible: false,
      endTime: "",
      timeAll: 3000,
      ansList: [],
      percentage: 0,
    };
  },
  async created() {
    await this.getTopic();
    this.randlist.map((v) => {
      if (typeof v.options == "object") {
        v.options = JSON.parse(v.options);
      } else if (typeof v.options == "string") {
        v.options = JSON.parse(v.options.split(","));
      }
    });
  },
  mounted() {
    this.timerRun();
  },
  methods: {
    ...mapActions("exam", ["getTopic"]),

    nubClick(index) {
      this.nub = index;
    },

    // 上下一题
    addNub() {
      if (this.nub == 49) {
        this.$confirm(
          "请再次确认是否提交试卷？提交后将无法继续作答！",
          "提示",
          {
            confirmButtonText: "确认提交",
            cancelButtonText: "继续作答",
            type: "warning",
          }
        )
          .then(() => {
            let num = 3000 - this.timeAll,
              d = parseInt(num / 60),
              s = parseInt(num % 60);
            this.endTime = this.getZero(d) + ":" + this.getZero(s);
            this.dialogVisible = true;
          })
          .catch(() => {
            this.nub = 49;
            this.$message({
              type: "info",
              message: "继续答题！",
            });
          });
      } else {
        this.nub += 1;
        let arr = JSON.parse(this.randlist[this.nub].answers),
          ary = this.randlist[this.nub].usersAnswers;
        console.log(arr);
        console.log(ary);
        if (arr.length == ary.length) {
          console.log(
            arr.find((v) => {
              return ary.indexOf(v);
            })
          );
        } else {
        }
      }
    },
    isClose() {
      this.dialogVisible = false;
      this.nub = 0;
      this.timeAll = 3000;
      this.timer = null;
      this.getTopic();
    },

    // 倒计时
    timerRun() {
      this.timer = setInterval(() => {
        this.timeAll--;
        this.percentage = (1 - this.timeAll / 3000) * 100;
        let d = parseInt(this.timeAll / 60);
        let s = parseInt(this.timeAll % 60);
        this.time = this.getZero(d) + ":" + this.getZero(s);
        if (this.timeAll == 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    getZero(a) {
      return a < 10 ? "0" + a : a;
    },

    // nub
    nubChange() {
      for (let i = 0; i < this.ansList.length; i++) {
        if (this.nub == this.ansList[i].index) {
          return;
        }
      }
      this.ansList.push({
        index: this.nub,
        answers: [],
        isBool: false,
      });
    },
  },
  computed: {
    ...mapState("exam", ["randlist"]),
  },
};
</script>

<style scoped>
ul {
  list-style: none;
}

.app-container {
  display: flex;
  justify-content: space-between;
}

.app-container > div {
  width: 50%;
}

h3 > span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: black;
  color: white;
  border-radius: 100%;
  text-align: center;
  line-height: 16px;
  font-size: 14px;
}

.btns {
  margin: 26px 0;
}

.btns > button {
  margin: 0 12px;
}

.title-nub {
  width: 80%;
  margin: auto;
}

.title-nub > li {
  float: left;
  width: 30px;
  height: 22px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 6px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

.title-nub > li:hover {
  background-color: rgba(252, 248, 213, 0.753);
  color: rgb(26, 30, 252);
}

.hover {
  background-color: rgb(0, 183, 255, 0.7);
}

.percent {
  width: 126px;
  height: 126px;
  position: relative;
  margin: 216px 260px;
  display: flex;
}

.percent > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
</style>

<style>
.el-drawer__header > span {
  outline: none;
  border: 0;
}

.el-drawer__body > span {
  padding: 26px;
}
</style>